<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .swiper-container {
        width: 640px;
        height: 320px;
        overflow: hidden;
        /* 设置为参照物 */
        position: relative
    }

    .img-list {
        width: 1920px;
        height: 320px;
        display: flex;
        /* 过度效果 */
        transition: transform 0.3s
    }

    .img-list img {
        width: 640px;
        height: 320px;
    }

    .btn-list {
        /* 实现按钮再图片下方显示   参照物是swiper-container*/
        position: absolute;
        bottom: 0;
    }
</style>

<body>
    <div class="swiper-container">
        <div class="img-list">
            <img src="images/0100.jpg" alt="">
            <img src="images/0200.jpg" alt="">
            <img src="images/0300.jpg" alt="">
        </div>
        <div class="btn-list">
            <button>1</button>
            <button>2</button>
            <button>3</button>
        </div>

    </div>
    <script>
        //实现轮播图
        //图片横向布局
        //先获取到按钮元素
        //获取到图片的组合
        //然后给按钮列表加一个点击事件
        //点击事件 中实现图片的移动达到轮播图的效果
        let btnList = document.querySelectorAll(".btn-list button");
        let imgList = document.querySelector(".img-list");
        for (let i in btnList) {
            btnList[i].onclick = function () {
                setTimeout(function () {
                    imgList.style.transform = `translate(${-640 * i}px)`;
                }, 3000);

            }



        }

    </script>
</body>

</html>